<template>
    <div class="mt-96">
        <div class="bg-fff">
            <div class="clearfix p-30 border-bottom pr">
                <!-- <router-link :to="{name:'DlStoreIndex',query:{'storeId':storeInfo.id}}" id="getStoreInfo"> -->
                    <a :href="'/store/store-index.html?storeId='+storeInfo.id">
                    <div class="fl player-img pr" id="storeImg">
                        <img :src=storeInfo.storeImageUrl></div>
                    <div class="fl ml-20 mt-46" id="storeName">
                        <h2>{{storeInfo.name}}</h2>
                    </div>
                    </a>
                <!-- </router-link> -->
                <a id="playerContact" class="reor-btn1 pa bg-f75e46 color-fff text-center f32 px-20 py-15"
                   :href="'mqqwpa://im/chat?chat_type=wpa&uin='+orderInfo.goodsQq+'&version=1&src_type=web&web_src=oicqzone.com'"
                   v-if="$route.query.type==3">
                    联系打手
                </a>
                <a class="reor-btn1 pa bg-f75e46 color-fff text-center f32 px-20 py-15"
                   :href="'mqqwpa://im/chat?chat_type=wpa&uin='+orderInfo.playerQq+'&version=1&src_type=web&web_src=oicqzone.com'"
                   v-if="$route.query.type==4">联系玩家
                </a>
            </div>
            <div class="clearfix p-30">
                <div class="fl player-img pr" id="goodsImg"><img
                        :src=orderInfo.goodsImageUrlList>
                </div>
                <div class="fl player-text">
                    <dl class="ml-25">
                        <dt class="f26 color-666" id="pti">
                            {{orderInfo.gameName}}/{{orderInfo.regionName}}/{{orderInfo.serverName}}
                        </dt>
                        <dd class="f30 color-000 mt-15" id="title">{{orderInfo.goodsTitle}}</dd>
                        <dd class="f30 color-000 mt-15" id="price">￥{{orderInfo.totalPrice}}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="trans-record pb-200">
            <div class="reco-title">代练进度</div>
            <ul id="process">
                <li id="process_1" :class="{'tractive':index==0}" v-for="(item,index) in progress">
                    <div class="trans-left">
                            <span class="hover">
                                <i class="pod-ico"></i>
                            </span>
                    </div>
                    <div class="trans-right">
                        <i class="prico"></i>
                        <!--<h2 v-if="$route.query.type==3">
                            {{item.opContent}}
                        </h2>-->
                        <h2 v-html="item.opContent">
                        </h2>
                        <p><span class="setTime">{{getMyDate(item.createTime)}}</span></p>
                    </div>
                </li>
            </ul>

        </div>
        <div class="fixed-bottom01 bg-fff px-45 py-20 border-top">
            <div v-if="$route.query.type==3">
                <a @click="goRefund(orderInfo.id,orderInfo.totalPrice)" class="rebtn1 w-100 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40"
                         v-if="orderInfo.orderStatus==2">
                我要退款
                </a>
                <a class="rebtn1 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus==3" @click="applyFinish">确认完成，打款</a>
                <a @click="goRefund(orderInfo.id,orderInfo.totalPrice)" class="rebtn2 f30 color-000 bg-fff lh82 text-center border-f75e46"
                         v-if="orderInfo.orderStatus==3">
                     我要退款
                </a>
                <a class="rebtn1 w-100 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus>3 && orderInfo.orderStatus<=10" v-text="footText"></a>
                <a class="rebtn1 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus==11" @click="goRefund(orderInfo.id,orderInfo.totalPrice)">协商退款</a>
                <router-link class="rebtn2 f30 color-000 bg-fff lh82 text-center border-f75e46" v-if="orderInfo.orderStatus==11" :to="{name:'DlBuyerAppeal',query:{'orderNum':orderInfo.id,type:4}}">人工介入</router-link>
            </div>
            <div v-else>
                <!-- 店铺单子 -->
                <a class="rebtn1 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus==2" @click="applyFinish">申请完成</a>
                <router-link class="rebtn2 f30 color-000 bg-fff lh82 text-center border-f75e46" v-if="orderInfo.orderStatus==2" :to="{name:'DlBuyerAppeal',query:{'orderNum':orderInfo.id,type:4}}">申诉</router-link>
                <router-link class="rebtn1 w-100 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus==3 || orderInfo.orderStatus==5" :to="{name:'DlBuyerAppeal',query:{'orderNum':orderInfo.id,type:4}}">申诉</router-link>
                <a class="rebtn1 w-100 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus>3 && orderInfo.orderStatus<10 &&orderInfo.orderStatus!=5" v-text="footText"></a>
                <a class="rebtn1 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus==10" @click="agreeRefund">同意退款</a>
                <a class="rebtn2 f30 color-000 bg-fff lh82 text-center border-f75e46" v-if="orderInfo.orderStatus==10" @click="refuseRefund">拒绝退款</a>
                <a class="rebtn1 w-100 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40" v-if="orderInfo.orderStatus==11">拒绝退款</a>
            </div>
            
            
            <!-- <router-link :to="{name:'DlBuyerAppeal',query:{'orderNum':orderInfo.id,type:4}}"
                          class="rebtn1 w-100 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40"
                          v-if="orderInfo.orderStatus==3">
                 申诉
             </router-link>-->
           <!--  <a class="rebtn1 w-100 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40"
               v-if="orderInfo.orderStatus>3 && orderInfo.orderStatus<10" v-text="footText">
            </a> -->
            <!-- <a class="rebtn1 f30 color-fff bg-f75e46 lh82 text-center border-f75e46 mr-40"
               v-if="orderInfo.orderStatus==10" @click="agreeRefund">同意退款</a>
            <a class="rebtn2 f30 color-000 bg-fff lh82 text-center border-f75e46"
               v-if="orderInfo.orderStatus==10" @click="refuseRefund">拒绝退款</a> -->
        </div>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex'
    export default {
        name: '',
        data () {
            return {
                orderInfo: '',
                storeInfo: '',
                footText: '',
            }
        },
        computed: {
            progress(){
                return this.$store.state.dl.progress || {};
            },
        },
        created(){
            this.$store.commit('SET_PROGRESS', '');
            if (this.$route.query.type == 3) {
                this.$store.commit('SET_MESSAGETYPE', 'getuserflowmessage')
            } else if (this.$route.query.type == 4) {
                this.$store.commit('SET_MESSAGETYPE', 'getuserflowmessage')
            }
            this.getProgress({orderId: this.$route.query.orderNum});
            this.getStoreOrder().then((orderInfo) => {
                if (this.orderInfo.orderStatus == 1) {
                    this.$bus.emit('headerText', `待付款`);
                } else if (this.orderInfo.orderStatus == 2) {
                    this.$bus.emit('headerText', `代练中`);
                } else if (this.orderInfo.orderStatus == 3) {
                    this.$bus.emit('headerText', `申请完成`);
                } else if (this.orderInfo.orderStatus == 4) {
                    this.footText = '已完成';
                    this.$bus.emit('headerText', `已完成`);
                } else if (this.orderInfo.orderStatus == 5) {
                    this.footText = '人工介入';
                    this.$bus.emit('headerText', `人工介入`);
                } else if (this.orderInfo.orderStatus == 7) {
                    this.footText = '退款中';
                    this.$bus.emit('headerText', `退款中`);
                } else if (this.orderInfo.orderStatus == 10) {
                    this.footText = '申请退款中';
                    this.$bus.emit('headerText', `申请退款中`);
                } else if (this.orderInfo.orderStatus == 11) {
                    this.footText = '拒绝退款';
                    this.$bus.emit('headerText', `拒绝退款`);
                }
                this.getStore(orderInfo);
            });
        },
        mounted(){

        },
        destroyed(){
            this.$bus.emit('headerText', '');
        },
        methods: {
            ...mapActions({
                    getOrderInfo: 'GET_ORDERINFO',
                    getProgress: 'GET_PROGRESS'
                }
            ),
            getMyDate(str) {
                var oDate = new Date(str);
                var oMonth, oDay, oHour, oMin, oTime;

                function toauto(s) {
                    return s < 10 ? '0' + s : s;
                };
                oMonth = oDate.getMonth() + 1,
                    oDay = oDate.getDate(),
                    oHour = oDate.getHours(),
                    oMin = toauto(oDate.getMinutes()),
                    oTime = oMonth + '-' + oDay + ' ' + oHour + ':' + oMin;//最后拼接时间
                return oTime;
            },
            getStoreOrder(){
                var self = this;
                return self.$http.get(self.$CONSTANTS.APIStore + 'storeOrder/queryByOrderNum', {params: {orderNum: self.$route.query.orderNum}}).then((res) => {
                    self.orderInfo = res.body.result;
                    return self.orderInfo;
                }, (res) => {
                    console.log(res)
                });
            },
            getStore(orderInfo){
                this.$http.get(this.$CONSTANTS.APIStore + 'storeService/getStore', {params: {id: orderInfo.storeId}}).then((res) => {
                    this.storeInfo = res.body.result;
                    console.log(this.storeInfo);
                }, (res) => {
                    console.log(res)
                });
            },
            applyFinish(){
                //确认完成，打款
                let getType;
                if(this.$route.query.type==3){
                    getType='finish'
                }else{
                    getType='applyFinish'
                }
                this.$messagebox({
                    message: '确认是否代练完成?',
                    showCancelButton: true,
                    confirmButtonClass: "dlMessageboxConfrim",
                    cancelButtonClass: "dlMessageboxCancel",
                }).then(action => {
                    if (action == "confirm") {
                        this.$http.get(this.$CONSTANTS.APIStore + 'storeOrder/'+getType, {params: {id: this.orderInfo.id}}).then((res) => {
                            if (res.body.responseStatus.code == '00') {
                                location.reload();
                            }
                        }, (res) => {
                            console.log(res)
                        });
                    } else {
                        return false
                    }
                });
            },
            agreeRefund(){
                //同意退款
                this.$messagebox({
                    message: '确认同意退款?',
                    showCancelButton: true,
                    confirmButtonClass: "dlMessageboxConfrim",
                    cancelButtonClass: "dlMessageboxCancel",
                }).then(action => {
                    if (action == "confirm") {
                        this.$http.get(this.$CONSTANTS.APIStore + 'storeOrder/agreeRefund', {params: {id: this.orderInfo.id}}).then((res) => {
                            if (res.body.responseStatus.code == '00') {
                                location.reload();
                            }
                        }, (res) => {
                            console.log(res)
                        });
                    } else {
                        return false
                    }
                });
            },
            refuseRefund(){
                //拒绝退款
                this.$messagebox({
                    message: '确认拒绝退款?',
                    showCancelButton: true,
                    confirmButtonClass: "dlMessageboxConfrim",
                    cancelButtonClass: "dlMessageboxCancel",
                }).then(action => {
                    if (action == "confirm") {
                        this.$http.get(this.$CONSTANTS.APIStore + 'storeOrder/refuseRefund', {params: {id: this.orderInfo.id}}).then((res) => {
                            if (res.body.responseStatus.code == '00') {
                                location.reload();
                            }
                        }, (res) => {
                            console.log(res)
                        });
                    } else {
                        return false
                    }
                });
            },
    goRefund(id,price){
        if(this.$isLocalStorageSupported){
            localStorage.setItem('refund',price)
        }
        this.$router.push({name:'DlreFund',query:{orderId:id}})
            }
        }
    }
</script>


<style src="css/dlAll/dl-cxy.css"></style>
<style>
    .dlMessageboxConfrim {
        order: 1;
    }

    .dlMessageboxCancel {
        order: 2;
        border-left: 1px solid #ddd !important;
    }
</style>
